<!--  flex布局，column，分为头，身，脚，三部分，头脚固定高 ， 身体自适应撑满，并有滚动条 -->
<template>
  <div class='PageTpl'>
    <div class='PageTpl-header'>
      <slot name='header'></slot>
    </div>
    <div class='PageTpl-body'>
      <el-scrollbar>
        <slot name='body'></slot>
      </el-scrollbar>
    </div>
    <div class='PageTpl-footer'>
      <slot name='footer'></slot>
    </div>
  </div>
</template>
<script setup name='PageTpl'>
</script>
<style scoped lang="scss">
.PageTpl {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .PageTpl-header {
    flex: 0 0 auto;
  }
  .PageTpl-body {
    flex: 1 1 auto;
    overflow: hidden;
  }
  .PageTpl-footer {
    flex: 0 0 auto;
  }
  @media screen and (max-width: 768px) {
    .PageTpl-header {
      flex: 0 0 auto;
    }
    .PageTpl-body {
      flex: 1 1 auto;
      overflow: auto;
    }
    .PageTpl-footer {
      flex: 0 0 auto;
    }
  }
}
</style>
